import React, { Component } from 'react';
import {
  Text,
  View,
  TouchableWithoutFeedback,
  StyleSheet,
  Image,
} from 'react-native';
import Swiper from 'react-native-swiper';
import PropTypes from 'prop-types';
import { px2dp } from 'bee/utils';
import { sizes, colors } from 'bee/themes';
// @flow
type Props = {
  icons: Array,
  navigation: Object,
};

const Icon = ({ data, navigation }) => (
  <TouchableWithoutFeedback
    onPress={() => {
      navigation.navigate(data.screen);
    }}
  >
    <View style={styles.iconBox}>
      <Image source={{ uri: data.icon }} style={styles.icon} />
      <Text style={styles.iconText}>{data.title}</Text>
    </View>
  </TouchableWithoutFeedback>
);

Icon.propTypes = {
  navigation: PropTypes.objectOf(PropTypes.func).isRequired,
  data: PropTypes.shape({
    icon: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
    screen: PropTypes.string.isRequired,
  }).isRequired,
};
class Icons extends Component<Props> {
  render() {
    const { icons, navigation } = this.props;
    const pages = [];

    icons.forEach((value, key) => {
      const page = Math.floor(key / 8);
      if (!pages[page]) {
        pages[page] = [];
      }

      pages[page].push(value);
    });

    return (
      <View style={styles.icons}>
        <Swiper {...swiperOptions}>
          {pages.map((page, k) => (
            <View key={k} style={styles.iconRow}>
              {page.map((value, key) => (
                <Icon key={key} data={value} navigation={navigation} />
              ))}
            </View>
          ))}
        </Swiper>
      </View>
    );
  }
}
// 轮播图配置项
const swiperOptions = {
  loop: false,
  dotColor: 'transparent',
  activeDotColor: 'transparent',
};

const styles = StyleSheet.create({
  // Icon
  iconBox: {
    width: '25%',
    height: '50%',
    alignItems: 'center',
    justifyContent: 'center',
  },
  icon: {
    width: px2dp(100),
    height: px2dp(100),
  },
  iconText: {
    fontSize: sizes.f2,
    color: colors[1101],
  },

  // Icons
  icons: {
    width: px2dp(750),
    height: px2dp(360),
    backgroundColor: colors.white,
    justifyContent: 'center',
  },
  iconRow: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    flex: 1,
  },
});

export default Icons;
